<template>
  <div id="dashboard">
    <keep-alive :include="['home', 'category']">
      <router-view></router-view>
    </keep-alive>
    <van-tabbar v-model="active" active-color="#08dbdb" inactive-color="#000">
      <van-tabbar-item :to="{ name: 'home' }">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? home_icon.active : home_icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'category' }">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? cart_icon.active : cart_icon.inactive" />
        </template>
      </van-tabbar-item>
      <!-- <van-badge
        :content=""
        color="#1989fa"
      > -->
      <van-tabbar-item
        :to="{ name: 'cart' }"
        :badge="countCartSelect ? countCartSelect : ''"
      >
        <span>购物车</span>
        <template #icon="props">
          <img
            :src="props.active ? category_icon.active : category_icon.inactive"
          />
        </template>
      </van-tabbar-item>
      <!-- </van-badge> -->
      <van-tabbar-item :to="{ name: 'mine' }">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? mine_icon.active : mine_icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Dashboard",
  data() {
    return {
      active: 0,
      home_icon: {
        active: require("../../assets/img/nav_img/tab_home_hig.png.png"),
        inactive: require("../../assets/img/nav_img/tab_home_nor.png.png"),
      },
      cart_icon: {
        active: require("../../assets/img/nav_img/tab_menu_hig.png.png"),
        inactive: require("../../assets/img/nav_img/tab_menu_nor.png.png"),
      },
      category_icon: {
        active: require("../../assets/img/nav_img/tab_shopping_hig.png.png"),
        inactive: require("../../assets/img/nav_img/tab_shopping_nor.png.png"),
      },
      mine_icon: {
        active: require("../../assets/img/nav_img/tab_me_hig.png.png"),
        inactive: require("../../assets/img/nav_img/tab_me_nor.png.png"),
      },
    };
  },
  computed: mapGetters(["countCartSelect"]),

  //当点击返回时处理状态丢失问题
  //方式1（不包括create）：
  // watch: {
  //   $route: {
  //     handler() {
  //       console.log(123);
  //       this.active = this.$route.meta.active;
  //     },
  //     //立即执行（默认false->不会立即执行）
  //     immediate: true,
  //   },
  // },
  //方式2（包括create):
  created() {
    //页面刷新状态丢失问题解决
    // console.log(this.$route);
    //方式1：
    // const arr = ["name", "cart", "category", "mine"];

    // const { name } = this.$route;
    // this.active = arr.findIndex((item) => item === name);
    //处理方式2：
    this.active = this.$route.meta.active;
  },
  beforeRouteUpdate(to, from, next) {
    this.active = to.meta.active;
    next();
  },
};
</script>

<style lang="less"></style>
